import { Line, Scatter, G2 } from '@ant-design/charts';
import { Tooltip, Space } from 'antd';
import { memo } from 'react';
import { QuestionCircleOutlined } from '@ant-design/icons';

const dataParser = (data) => {
  let last300 = data?.[0].stockIndex.CSI300;
  const ret1 = [];
  const ret2 = [];
  data?.forEach((e, i) => {
    ret1.push({
      date: e.date,
      value: Math.sign(Number(e.CAR)),
      category: 'CAR',
    });
    ret2.push({
      date: e.date,
      value: i === 0 ? 0 : ((e.open - e.previousClose) / e.previousClose).toFixed(3),
      category: '个股',
    });
    Object.keys(e.stockIndex).forEach((si) => {
      switch (si) {
        case 'CSI300': {
          ret2.push({
            date: e.date,
            value: ((e.stockIndex[si] - last300) / last300).toFixed(3),
            category: si,
          });
          last300 = e.stockIndex[si];
          break;
        }

        default:
          break;
      }
    });
  });
  return [ret1, ret2];
};

const Chart = ({ data, date, prediction }) => {
  // data来源于companyDetail里面的stockInfoList，date和prediction都来源于FinancialPublicOpinion里面的prediction
  // date是2022-01-16 prediction是{date: '2022-01-16', value: -1.1, riskIndex: 'car'}
  // console.log('this is date&prediction--->', date, prediction);
  G2.registerShape('point', 'breath-point', {
    draw(cfg, container) {
      const { data } = cfg;
      const point = {
        x: cfg.x,
        y: cfg.y,
      };
      const group = container.addGroup();
      if (data.category === 'CAR' && data.date === date) {
        const decorator1 = group.addShape('circle', {
          attrs: {
            x: point.x,
            y: point.y,
            r: 10,
            fill: 'purple',
            opacity: 0.5,
          },
        });
        const decorator2 = group.addShape('circle', {
          attrs: {
            x: point.x,
            y: point.y,
            r: 10,
            fill: '#722ED1',
            opacity: 0.5,
          },
        });
        const decorator3 = group.addShape('circle', {
          attrs: {
            x: point.x,
            y: point.y,
            r: 10,
            fill: '#722ED1',
            opacity: 0.5,
          },
        });
        decorator1.animate(
          {
            r: 20,
            opacity: 0,
          },
          {
            duration: 1800,
            easing: 'easeLinear',
            repeat: true,
          },
        );
        decorator2.animate(
          {
            r: 20,
            opacity: 0,
          },
          {
            duration: 1800,
            easing: 'easeLinear',
            repeat: true,
            delay: 600,
          },
        );
        decorator3.animate(
          {
            r: 20,
            opacity: 0,
          },
          {
            duration: 1800,
            easing: 'easeLinear',
            repeat: true,
            delay: 1200,
          },
        );
        group.addShape('circle', {
          attrs: {
            x: point.x,
            y: point.y,
            r: 6,
            fill: '#722ED1',
            opacity: 0.7,
          },
        });
        group.addShape('circle', {
          attrs: {
            x: point.x,
            y: point.y,
            r: 1.5,
            fill: '#722ED1',
          },
        });
      } else {
        group.addShape('circle', {
          attrs: {
            x: point.x,
            y: point.y,
            r: 3,
            fill: '#722ED1',
            opacity: 0.7,
          },
        });
      }

      return group;
    },
  });
  const [data2, data1] = dataParser(data);
  // console.log('data1&data2--->', data1, data2);
  // data1是一个数组，每一条数据{date:yyyy-mm-dd,value:三位小数,category:'个股'或者'CSI300'}
  data2.push({
    date: prediction.date,
    value: Math.sign(Number(prediction.value)),
    category: 'CAR',
  });
  const config1 = {
    data: data1,
    xField: 'date',
    yField: 'value',
    seriesField: 'category',
    xAxis: {
      type: 'time',
    },
    yAxis: {
      min: 2500,
      // what is the use of this...
      // label: { formatter: (val) => val.slice(0, 6) },
    },
    point: {
      shape: 'circle',
    },
    color: ['#3DA2FF', '#722ED1'],
  };
  const config2 = {
    data: data2,
    xField: 'date',
    yField: 'value',
    yAxis: {
      min: -2,
      max: 2,
      nice: true,
    },
    xAxis: {
      type: 'time',
    },
    shape: 'breath-point',
    title: 'CAR历史值及预测结果',
  };

  const text = (
    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
      <span>
        大盘指数收益被视为个股的期望收益，个股收益相对于指数收益的偏离通常是由个股相关联的事件造成的。
      </span>
      <span>
        累积异常收益（CAR）指一段时间内实际收益率相较于期望收益率的偏差，是研究特定事件对目标公司股票价格短期影响常用的分析指标。CAR为正值时，表明事件对公司产生了正面影响，反之则为负面影响。
      </span>
      <span>
        {' '}
        我们将CAR作为预测指标，同时考虑公司间关联以及公司涉及行业，对新闻舆情进行建模从而量化新闻舆情对公司的影响。
      </span>
    </Space>
  );

  return data ? (
    <>
      <Line {...config1} style={{ marginBottom: '2em', height: '20rem' }} />
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <h2 style={{ textAlign: 'center', marginBottom: '20px' }}>CAR历史值及预测结果</h2>
        <Tooltip title={text}>
          <QuestionCircleOutlined
            style={{
              color: '#999999',
              fontSize: '14px',
              position: 'relative',
              right: '-4px',
              bottom: '-9px',
            }}
          />
        </Tooltip>
      </div>

      <Scatter {...config2} style={{ height: '20rem' }} />
    </>
  ) : null;
};

export default memo(Chart);
